<template>
  <div>
    <div v-if="loginUser.roleId===1">
      <span>只有管理员才有权限查看</span>
    </div>

    <div v-if="loginUser.roleId===2">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-discount"></i> 统计信息
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            统计
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <div style="width: 50%;height: 400px; float: left; ">
          <span>场馆总收入</span>
          <el-card shadow="hover" style="height:356px;">
            <zhuzhuangtu></zhuzhuangtu>
          </el-card>
        </div>
        <div style="width: 50%;height: 400px; float: right;">
          <span>场馆最近5天收入</span>
          <el-card shadow="hover" style="height:356px;">
            <zhuzhuangtu2></zhuzhuangtu2>
          </el-card>
        </div>
      </div>
      <div>
        <div style="width: 100%;height: 300px; float: left; ">
          <span>运动器材总收入</span>
          <el-card shadow="hover" style="height:356px;">
            <zhuzhuangtu4></zhuzhuangtu4>
          </el-card>
        </div>

      </div>
    </div>


  </div>
</template>

<script>
import zhuzhuangtu from "./BarChart1";
import zhuzhuangtu2 from "./BarChart2";
import zhuzhuangtu4 from "./BarChart4";

export default {
  name: 'Statistics',
  data() {
    return {
      searchParams: {
        content: ''
      },
      dialogFormVisible: false,
      form: {
        id: "",
        content: ""
      },
      pageParams: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      title: '',
      tableData: [],
      loading: true, //是显示加载
      loginUser: {}
    }
  },
  created() {
    this.getLoginUser()
  },
  components: {
    zhuzhuangtu,
    zhuzhuangtu2,
    zhuzhuangtu4,
  },
  methods: {
    getLoginUser() {
      this.$ajax.post("/user/getLoginUser", {token: Tool.getLoginUser()}).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          if (resp.data) {
            this.loginUser = resp.data;
            this.getAnnounceList();
          } else {
            this.$message.error(resp.msg);
            this.$router.push("/login");
          }
        }
      });
    },
  },
  // 搜索事件


};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.orange {
  color: #ffA500;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
